<!DOCTYPE HTML>
<html>
<head>
    <title>WebSocket test</title>
    <meta http-equiv="Access-Control-Allow-Headers" content="*">
    <meta charset="UTF-8"/>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
Welcome<br/>
当前连接状态：
<span id="showFirst">
    关闭
</span>
<br/>
<input id="text" type="text"/>
<button id="sendClick" onclick="send()">发送</button>
<br/>
<br/>
<button id="switchClick" onclick="closeWebSocket()">关闭连接</button>
<br/>
<br/>
<button id="pairing" onclick="pairing()">匹配</button>
<br/>
<br/>
<div id="message">
    打印信息：
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    var sid = Math.floor(Math.random() * 1000);

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {

        var strRoomNum;
        var urlinfo = window.location.href;  //获取当前页面的url
        var len = urlinfo.split("?");//获取url的长度

        if (1 < len.length) {
            var newsidinfo = len[1];//取出参数字符串 这里会获得类似“id=1”这样的字符串
            var newsids = newsidinfo.split("&");//对获得的参数字符串按照“=”进行分割
            var roominfo = newsids[0];
            strRoomNum = roominfo.split("=")[1];
            var stridinfo = newsids[1];
            sid = stridinfo.split("=")[1];
        }

        if (null == strRoomNum || '' === strRoomNum || 'undefined' === strRoomNum) {
            //注意使用的是 ws://，而不是 http://
            websocket = new WebSocket("ws://127.0.0.1:11235/websocket/default/" + sid + "/online");
        } else {
            document.getElementById("pairing").remove();
            websocket = new WebSocket("ws://127.0.0.1:11235/websocket/" + strRoomNum + "/" + sid + "/Pairing");
        }

    } else {
        alert('浏览器不支持 websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setStatusHTML("连接错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        //设置按钮显示为   关闭
        setStatusHTML("打开");
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        setStatusHTML("关闭");
    };

    /**
     * 接收到服务端发过来的消息，
     * 回调方法
     * @param event
     */
    websocket.onmessage = function (event) {
        //将服务端的消息打印到屏幕
        setMessageInnerHTML(event.data);
    };

    /**
     * 给服务端发送消息
     *
     */
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    function pairing() {
        var strRoomNum = '';
        $.post("http://127.0.0.1:11235/checkcenter/socket/111", {"sid": sid}, function (data) {
            strRoomNum = data.data;
            closeWebSocket();
            // websocket = new WebSocket("ws://127.0.0.1:11235/websocket/" + strRoomNum + "/" + sid + "/Pairing1");
            window.location.href = window.location.href + "?roomNum=" + strRoomNum + "&sid=" + sid;
        }, 'json');

    }

    /**
     * 监听窗口的关闭事件，当窗口关闭时，主动去关闭websocket连接，
     * 防止连接还没断开就关闭窗口，server端会抛异常。
     */
    window.onbeforeunload = function () {
        websocket.close();
    };

    //修改开关按钮的显示
    function setStatusHTML(text) {
        document.getElementById('showFirst').innerHTML = text;
    }

    //将消息显示在网页上 追加显示
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

</script>
</html>